import React from 'react';
import { Card, Row, Col, Empty, Spin, Typography, Badge } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import SearchFilter from './SearchFilter';
import NetworkCard from './NetworkCard';
import PaginationComponent from './PaginationComponent';

const { Text } = Typography;

const PublicNetworksSection = ({
  networks,
  isLoading,
  searchKeyword,
  statusFilter,
  networkTypeFilter, 
  pagination,
  onSearch,
  onSearchChange,
  onStatusFilterChange,
  onNetworkTypeFilterChange, 
  onPageChange,
  onNetworkJoined
}) => {
  const renderContent = () => {
    if (isLoading) {
      return (
        <div className="loading-container">
          <Spin size="large" />
          <div className="loading-text">
            <Text type="secondary">搜索中...</Text>
          </div>
        </div>
      );
    }

    if (networks.length > 0) {
      return (
        <>
          <div className="network-grid">
            <Row gutter={[16, 16]}>
              {networks.map(network => (
                <Col xs={24} sm={12} lg={8} key={network.networkId}>
                  <NetworkCard 
                    network={network} 
                    showJoinButton={true}
                    onNetworkJoined={onNetworkJoined}
                  />
                </Col>
              ))}
            </Row>
          </div>
          
          {/* 分页 */}
          {pagination.total > pagination.pageSize && (
            <div className="pagination-container">
              <PaginationComponent
                current={pagination.current}
                pageSize={pagination.pageSize}
                total={pagination.total}
                onChange={onPageChange}
              />
            </div>
          )}
        </>
      );
    }

    return (
      <div className="empty-state-container">
        <Empty
          description={
            <Text type="secondary">
              {searchKeyword ? 
                '没有找到符合条件的公共局域网' : 
                '暂无公共局域网'
              }
            </Text>
          }
        />
      </div>
    );
  };

  return (
    <div className="network-home-content">
      <Card className="network-section">
        <div className="section-header">
          <div className="section-title">
            <GlobalOutlined />
            探索公共局域网
            <Badge 
              count={pagination.total} 
              className="section-badge"
              showZero
              overflowCount={999}
            />
          </div>
        </div>

        {/* 搜索和筛选 */}
        <div className="search-filter-container">
          <SearchFilter
            searchKeyword={searchKeyword}
            statusFilter={statusFilter}
            networkTypeFilter={networkTypeFilter} 
            isLoading={isLoading}
            onSearch={onSearch}
            onSearchChange={onSearchChange}
            onStatusFilterChange={onStatusFilterChange}
            onNetworkTypeFilterChange={onNetworkTypeFilterChange} 
          />
        </div>

        {renderContent()}
      </Card>
    </div>
  );
};

export default PublicNetworksSection;